<script setup lang="ts">
import type { MenuProps } from '@/components/menu/menu'
import { storeToRefs } from 'pinia'
import { computed } from 'vue'
import { useLoginStore } from '@/stores/loginStore'

const loginStore = useLoginStore()
const { menus } = storeToRefs(loginStore)
// 面包屑导航菜单
const breadcrumbMenus = computed(() => {
  const result: MenuProps[] = []
  let children = menus.value ?? []
  while (children.length > 0) {
    let isActive = false
    for (let i = 0; i < children.length; i++) {
      const m = children[i]
      if (m.isActive) {
        isActive = true
        result.push(m)
        children = m.children ?? []
        break
      }
    }
    if (!isActive) {
      break
    }
  }
  return result
})
</script>

<template>
  <el-breadcrumb separator=">">
    <template v-for="(m, index) in breadcrumbMenus" :key="m.path">
      <el-breadcrumb-item
        :to=" (index === (breadcrumbMenus.length - 1)) ? undefined : { path: m.path }"
      >
        <div class="flex flex-row">
          <div
            v-if="m.icon"
            :class="`${m.icon} mr-1`"
          />
          <div class="font-normal">
            {{ m.title }}
          </div>
        </div>
      </el-breadcrumb-item>
    </template>
  </el-breadcrumb>
</template>
